<template>
  <div class="app-container">
    <div class="page-title">站点列表 共计引用次数 <span>{{ total }}</span></div>
    <div class="content">
      <div class="content-summary">
        <h1 class="summary-title"><a :href="h5Html" target="_blank">{{ title }}</a></h1>
        <ul class="summary-info clearfix">
          <li class="fl"><span class="main">稿件ID</span><span class="minor">{{ articleId }}</span></li>
          <li class="fl"><span class="main">编辑账号</span><span class="minor">{{ createBy }}</span></li>
          <li class="fl"><span class="main">共享时间</span><span class="minor">{{ createTime }}</span></li>
          <li class="fl"><span class="main">来源</span><span class="minor">{{ sourceFromName }}</span></li>
        </ul>
      </div>
      <el-table v-loading="loading" :data="countList" stripe>
        <el-table-column label="市区县识别码" align="center" prop="sourceTo" />
        <el-table-column label="市区县名称" align="center" prop="sourceToName" />
<!--        <el-table-column label="引用次数" align="center" prop="refNum" />-->
        <el-table-column label="引用时间" align="center" prop="createTime" />
        <el-table-column label="联系电话" align="center" prop="phone" />
      </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { listRef } from "@/api/manuscripts/ref";

  export default {
    name: "ReferCount",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 文章被引用次数表格数据
        countList: [],
        // 文章信息
        title: '',
        articleId: '',
        h5Html: '',
        createBy: '',
        createTime: '',
        sourceFromName: '',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          refArticleid: '',
        }
      };
    },
    created() {
      this.title = this.$route.query.title;
      this.articleId = this.$route.query.articleId;
      this.h5Html = this.$route.query.h5Html;
      this.createBy = this.$route.query.createBy;
      this.createTime = this.$route.query.createTime;
      this.sourceFromName = this.$route.query.sourceFromName;
      this.queryParams.refArticleid = this.$route.query.articleId;
      this.getList();
    },
    methods: {
      /** 查询来源站点列表 */
      getList() {
        this.loading = true;
        listRef(this.queryParams).then(response => {
          this.countList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    }
  };
</script>
<style scoped lang="scss">
  .content {
    padding: 30px;
    background-color: #F6F9FC;
    .content-summary {
      margin-bottom: 30px;
      padding-left: 73px;
      height: 62px;
      background-image: url("../../src/assets/image/quote_icon_file.png");
      background-repeat: no-repeat;
      background-position: center left;
      .summary-title {
        margin-bottom: 26px;
        font-size: 18px;
        color: #242424;
        &:hover {
          color: #0957C5;
        }
      }
      .summary-info {
        padding: 0;
        list-style: none;
        li {
          margin-right: 66px;
          font-size: 14px;
        }
        .main {
          padding-right: 10px;
          color: #666666;
        }
        .minor {
          color: #242424;
        }
      }
    }
  }
</style>
